<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				/* color: darkblue; */
			}
			#canvas{
				display: block;
				background: linear-gradient(red,purple,darkblue,deepskyblue);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script type="text/javascript">
			let canvas=document.querySelector("#canvas");
			let cContent=canvas.getContext("2d");
			// window.onload=function(){
			// 	// canvas;
			// 	canvas.width=window.innerWidth;
			// 	canvas.height=window.innerHeight;
				
			// 	// var my_gradient=cContent.createLinearGradient(0,0,170,0);
			// 	// my_gradient.addColorStop(0,"black");
			// 	// my_gradient.addColorStop(1,"white");;
				
			// }
			
			window.onresize=initCanvas;
			function initCanvas(){
				arguments.callee();
				canvas.width=window.innerWidth;
				canvas.height=window.innerHeight;
				
			}
			cContent.beginPath()
			cContent.fillStyle="#FFFFFF";
			cContent.fillRect(0,0,20,100);
		</script>
	</body>
</html>
